<template>
    <div class="user-info">
        <el-avatar v-if="avatar" :size="size" :shape="avatarShape" :fit="avatarFit" :src="avatar" />
        <el-tooltip v-if="name.length > limit" placement="top" :content="name">
            <span class="user-name tip-name">{{ name }}</span>
        </el-tooltip>
        <span v-else-if="name.length <= limit && name.length !== 0" class="user-name">{{ name }}</span>
        <span v-else class="user-name">--</span>
    </div>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        avatar: string; // 信息头像
        name: string; // 信息名称
        avatarFit: string; // 头像平铺方式
        avatarShape: string; // 头像形状
        limit: number; // 限制字数，超出出现 tooltip
        size: number; // 头像大小
    }>(),
    {
        avatar: '',
        name: '',
        avatarFit: 'cover',
        avatarShape: 'circle',
        limit: 10,
        size: 24
    }
);
</script>

<style lang="scss" scoped>
.user-info {
    display: flex;
    align-items: center;
    .user-name {
        margin-left: 8px;
    }
    .tip-name {
        font-weight: 400;
        max-width: 110px;
        margin-left: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    :deep(.el-avatar > img) {
        width: 100%;
        background: #fff;
    }
}
</style>
